<template>
	<div>
		<!-- <h1>投放管理|结案页面</h1> -->
		<div class="delivery">
			<img src="../../assets/wbh-brandsh.png.png">
			<div class="delivery_arg">
				<h1>投放管理</h1>
				<p>可用于管理您的UP主历史投放记录,支持手动添加和excel批量导入,定期生成结案报告</p>
			</div>
			<!-- <button type="button">+新增投放</button> -->
			<el-button type="text" @click="dialogVisible = true">+新增投放</el-button>
			<el-dialog title="新增投放记录" :visible.sync="dialogVisible" width="30%">
				<div class="module">
					<p>第一步,下载[批量导入模块]</p>
				</div>
				<div class="module_a">
					<p>批量导入模板<span>点击下载模板</span></p>
				</div>
				<div class="module">
					<p>第二步,信息填入表格后,上传表格</p>
				</div>
				<el-upload class="upload-demo" action="https://jsonplaceholder.typicode.com/posts/">
					<el-button size="small" type="primary">点击上传</el-button>
					<div slot="tip" class="el-upload__tip">只能上传xls/xlsx文件</div>
				</el-upload>
				<div class="module"><p>第三步,投放记录名称</p></div>
				<div class="module_b">
					<input type="text" placeholder="请输入投放记录名称">
				</div>
				<span slot="footer" class="dialog-footer">
					<el-button @click="dialogVisible = false">取 消</el-button>
					<router-link :to="'/first/renewal/'">
						<el-button type="primary" @click="dialogVisible = false">确 定</el-button>
					</router-link>
				</span>
			</el-dialog>
		</div>
		<div class="taberl">
			<el-tabs v-model="activeName">
				<el-tab-pane label="用户管理" name="first">
					<div>
						<img src="../../assets/wbh-nodata.png">
						<p>暂无投放记录， 您可以尝试手动添加</p>
						<!-- <button>+新增投放</button> -->
						<el-popover placement="top-start" title="" width="200" trigger="hover"
							content="付费会员可使用,充值请联系客服">
							<el-button slot="reference">+新增投放</el-button>
						</el-popover>
					</div>
				</el-tab-pane>
				<el-tab-pane label="配置管理" name="second">
					<div>
						<img src="../../assets/kzf_tu4.png">
						<p>暂无数据</p>
					</div>
				</el-tab-pane>
			</el-tabs>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				activeName: 'first',
				visible: false,
				dialogVisible: false
			}
		}
	}
</script>

<style>
	.el-button--text{
		background-color: #b898d0;
		margin-top: 20px;
		height: 40px;
		width: 100px;
		color: #FFFFFF;
	}
	.el-dialog__footer{
		border-top: 1px solid #ececec;
	}
	.module_b input{
		border: 1px solid #b9c3d2;
		width: 420px;
		height: 30px;
		margin-top: 10px;
		margin-left: 15px;
		text-indent: 10px;
		outline: #5830a0;
	}
	.module_b input:focus{
		border: 1px solid #5830a0;
	}
	.module_b input::placeholder{
		color: #c0c4cc;
	}
	.upload-demo{
		display: flex;
		margin-top: 10px;
		margin-left: 15px;
		margin-bottom: 20px;
	}
	.module_a p {
		margin-left: 15px;
		margin-top: 5px;
		margin-bottom: 20px;
	}

	.module_a span {
		color: #266eff;
	}

	.module {
		border-left: 5px solid #5830a0;
	}

	.module p {
		margin-left: 10px;
	}

	.el-dialog__header {
		border-bottom: 1px solid #f2f2f2;
	}

	.el-tabs__header {
		margin: 0;
	}

	.el-tabs__content {
		background-color: #FFFFFF;
	}

	.el-tabs__content div:nth-of-type(2) img {
		margin-top: 20px;
	}

	.el-tabs__content div:nth-of-type(2) p {
		font-size: 17px;
		color: #909399;
	}

	.el-tabs__content div:nth-of-type(2) {
		height: 320px;
	}

	.el-tabs__content div {
		text-align: center;
		margin: auto;
		/* margin-top: 200px; */
		height: 680px;
	}

	.el-tabs__content div img {
		width: 160px;
		height: 160px;
		margin-top: 180px;
	}

	.el-tabs__content div p {
		font-size: 15px;
		color: #2e384d;
	}

	.el-tabs__content div button {
		color: #FFFFFF;
		background-color: #b898d0;
		border: none;
		border-radius: 5px;
		margin-top: 20px;
		cursor:not-allowed;
	}

	.el-tabs__nav-scroll {
		background-color: #FFFFFF;
	}

	.el-tabs__nav {
		margin-left: 20px;
	}

	.delivery {
		display: flex;
		background-color: #FFFFFF;
		height: 90px;
		box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
	}

	.delivery img {
		width: 50px;
		height: 50px;
		margin-top: 20px;
		margin-left: 20px;
	}

	/* .delivery button {
		height: 35px;
		width: 100px;
		color: #FFFFFF;
		background-color: #5830a0;
		border: none;
		border-radius: 5px;
		margin-top: 20px;
	} */

	.delivery_arg {
		width: 1480px;
		margin-top: 20px;
		margin-left: 15px;
	}

	.delivery_arg h1 {
		font-size: 22px;
		color: #2e384d;
	}

	.delivery_arg p {
		color: #a8acb0;
		font-size: 14px;
		margin-top: 3px;
	}
</style>
